<link rel="preconnect" href="https://unpkg.com/" />
<link
  rel="icon"
  href="https://unpkg.com/@njzjz/icons@0.0.5/logos/deepmodeling.svg"
  type="image/png"
/>
<!-- The initial version is taken from
https://github.com/pytorch/pytorch_sphinx_theme
under MIT license
-->
<div class="container-fluid header-holder tutorials-header" id="header-holder">
  <div class="container">
    <div class="header-container">
      <a
        class="header-logo"
        href="https://deepmodeling.com"
        aria-label="deepmodeling"
      ></a>

      <div class="main-menu">
        <ul>
          {% for item in items %}
          <li class="{{ item.class }}">
            {% if item.subitem %}
            <div
              id="resourcesDropdownButton"
              data-toggle="resources-dropdown"
              class="resources-dropdown"
            >
              <a
                href="{{ item.url }}"
                class="resource-option with-down-orange-arrow"
              >
                {{ item.title }}
              </a>
              <div class="resources-dropdown-menu">
                {% for subitem in item.subitem %}
                <a
                  class="doc-dropdown-option nav-dropdown-item"
                  href="{{ subitem.url }}"
                >
                  <span class="dropdown-title">{{ subitem.title }}</span>
                  <p></p>
                </a>
                {% endfor %}
              </div>
            </div>
            {% else %}
            <a href="{{ item.url }}">{{ item.title }}</a>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>

      <a
        class="main-menu-open-button"
        href="#"
        data-behavior="open-mobile-menu"
      ></a>
    </div>
  </div>
</div>

<div class="mobile-main-menu">
  <div class="container-fluid">
    <div class="container">
      <div class="mobile-main-menu-header-container">
        <a
          class="header-logo"
          href="https://deepmodeling.com"
          aria-label="deepmodeling"
        ></a>
        <a
          class="main-menu-close-button"
          href="#"
          data-behavior="close-mobile-menu"
        ></a>
      </div>
    </div>
  </div>

  <div class="mobile-main-menu-links-container">
    <div class="main-menu">
      <ul>
        {% for item in items %}
        <li>
          <a href="{{ item.url }}">{{ item.title }}</a>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
